Custom Animations .NET MAUI এ UI উপাদানগুলির জন্য কাস্টম অ্যানিমেশন তৈরি করার একটি শক্তিশালী উপায়, যা আপনাকে অ্যাপ্লিকেশনে আরো ইন্টারঅ্যাকটিভ এবং দৃশ্যমান অভিজ্ঞতা তৈরি করতে সহায়ক। .NET MAUI অ্যানিমেশনগুলিকে সহজ এবং পরিষ্কারভাবে কাস্টমাইজ করার জন্য শক্তিশালী API সরবরাহ করে।
অ্যানিমেশন সাধারণত একটি UI উপাদানের বৈশিষ্ট্য (যেমন, অবস্থান, আকার, রঙ ইত্যাদি) পরিবর্তন করতে ব্যবহৃত হয়। .NET MAUI-তে Animation, AnimationExtensions, এবং Easing ক্লাসগুলো সহকারে কাস্টম অ্যানিমেশন তৈরি করা যায়।
Custom Animation তৈরি করার জন্য মৌলিক পদক্ষেপ:
1. সরল অ্যানিমেশন (Basic Animation)
একটি সাধারণ অ্যানিমেশন তৈরি করতে, আপনি Animation ক্লাস ব্যবহার করতে পারেন যা বিভিন্ন UI উপাদানের পরিবর্তনগুলিকে অ্যানিমেট করে।
using Microsoft.Maui.Controls;
using System;
namespace MauiApp
{
public class MainPage : ContentPage
{
public MainPage()
{
var boxView = new BoxView
{
Color = Colors.Blue,
WidthRequest = 100,
HeightRequest = 100
};
var animateButton = new Button
{
Text = "Animate Box"
};
animateButton.Clicked += (sender, args) =>
{
// Simple Animation: Box moves across the screen
var animation = new Animation(v => boxView.TranslationX = v, 0, 300);
animation.Commit(this, "MoveBox", 16, 1000, Easing.Linear, (v, c) => { }, () => false);
};
Content = new StackLayout
{
Children = { boxView, animateButton }
};
}
}
}
এখানে, একটি BoxView তৈরি করা হয়েছে যা একটি বাটন ক্লিকের মাধ্যমে স্ক্রীনের উপর দিয়ে সরে যাবে। TranslationX প্রপার্টি অ্যানিমেটেড করা হয়েছে, যেখানে 0 থেকে 300 পিক্সেল পর্যন্ত স্থানান্তর হবে। Easing.Linear ব্যবহার করা হয়েছে যাতে অ্যানিমেশনটি একটি সোজা গতিতে চলে।
2. Multiple Property Animations (একাধিক প্রপার্টির অ্যানিমেশন)
একাধিক প্রপার্টি একসাথে অ্যানিমেট করতে Animation ক্লাস ব্যবহার করতে পারেন। এখানে, একটি বাটন ক্লিকের মাধ্যমে একটি বক্সের রঙ এবং আকার উভয়ই পরিবর্তন করা হচ্ছে।
using Microsoft.Maui.Controls;
using System;
namespace MauiApp
{
public class MainPage : ContentPage
{
public MainPage()
{
var boxView = new BoxView
{
Color = Colors.Blue,
WidthRequest = 100,
HeightRequest = 100
};
var animateButton = new Button
{
Text = "Animate Box"
};
animateButton.Clicked += (sender, args) =>
{
// Create a new animation that changes both color and size
var colorAnimation = new Animation(v => boxView.Color = Color.FromArgb(v), 0, 1);
var widthAnimation = new Animation(v => boxView.WidthRequest = v, 100, 200);
var heightAnimation = new Animation(v => boxView.HeightRequest = v, 100, 200);
var mainAnimation = new Animation();
mainAnimation.Add(0, 0.5, colorAnimation);
mainAnimation.Add(0, 1, widthAnimation);
mainAnimation.Add(0, 1, heightAnimation);
mainAnimation.Commit(this, "ChangeColorAndSize", 16, 2000, Easing.CubicInOut, (v, c) => { }, () => false);
};
Content = new StackLayout
{
Children = { boxView, animateButton }
};
}
}
}
এখানে, বক্সের রঙ, প্রস্থ এবং উচ্চতা একসাথে অ্যানিমেট হচ্ছে। mainAnimation.Add() এর মাধ্যমে একাধিক অ্যানিমেশনকে একত্রিত করা হয়েছে। Easing.CubicInOut ব্যবহার করা হয়েছে যাতে অ্যানিমেশনটি শুরু এবং শেষে মসৃণ হয়।
3. Rotation এবং Scale Animation (ঘূর্ণন এবং আকার পরিবর্তন)
আপনি Rotate এবং Scale অ্যানিমেশনও তৈরি করতে পারেন। নিচে একটি উদাহরণ দেওয়া হল যেখানে একটি বক্সকে ঘুরানো এবং তার আকার পরিবর্তন করা হচ্ছে:
using Microsoft.Maui.Controls;
using System;
namespace MauiApp
{
public class MainPage : ContentPage
{
public MainPage()
{
var boxView = new BoxView
{
Color = Colors.Green,
WidthRequest = 100,
HeightRequest = 100
};
var animateButton = new Button
{
Text = "Animate Rotation & Scale"
};
animateButton.Clicked += (sender, args) =>
{
// Rotate and Scale animation
var rotationAnimation = new Animation(v => boxView.Rotation = v, 0, 360);
var scaleAnimation = new Animation(v => boxView.Scale = v, 1, 2);
var mainAnimation = new Animation();
mainAnimation.Add(0, 0.5, rotationAnimation);
mainAnimation.Add(0, 0.5, scaleAnimation);
mainAnimation.Commit(this, "RotateAndScale", 16, 1500, Easing.CubicInOut, (v, c) => { }, () => false);
};
Content = new StackLayout
{
Children = { boxView, animateButton }
};
}
}
}
এখানে, BoxView কে প্রথমে ঘোরানো এবং পরে আকার পরিবর্তন করা হচ্ছে। Rotation প্রপার্টি 0 থেকে 360 ডিগ্রি এবং Scale 1 থেকে 2 পর্যন্ত পরিবর্তিত হচ্ছে।
4. Easing Effects (Easing প্রভাব):
Easing হল এমন একটি ফিচার যা অ্যানিমেশনের গতিকে পরিবর্তন করতে সাহায্য করে। এটি আপনাকে অ্যানিমেশনের শুরু এবং শেষে কেমন আচরণ করবে তা নিয়ন্ত্রণ করতে দেয়। কিছু সাধারণ Easing প্রভাব:
Easing.Linear: একটি সোজা, সমান গতির অ্যানিমেশন।Easing.CubicInOut: প্রথমে ধীরে, পরে দ্রুত এবং আবার ধীরে।Easing.BounceOut: শেষের দিকে একটি বাউন্সি বা লাফানো প্রভাব।
Easing এর সাহায্যে আপনি অ্যানিমেশনটিকে আরও মসৃণ এবং আকর্ষণীয় করে তুলতে পারেন।
5. Custom Easing ব্যবহার করা:
using Microsoft.Maui.Controls;
using System;
namespace MauiApp
{
public class MainPage : ContentPage
{
public MainPage()
{
var boxView = new BoxView
{
Color = Colors.Red,
WidthRequest = 100,
HeightRequest = 100
};
var animateButton = new Button
{
Text = "Animate with Custom Easing"
};
animateButton.Clicked += (sender, args) =>
{
// Rotate and move with custom easing
var rotationAnimation = new Animation(v => boxView.Rotation = v, 0, 360);
var translationXAnimation = new Animation(v => boxView.TranslationX = v, 0, 200);
var mainAnimation = new Animation();
mainAnimation.Add(0, 1, rotationAnimation);
mainAnimation.Add(0, 1, translationXAnimation);
mainAnimation.Commit(this, "RotateAndMoveWithCustomEasing", 16, 1500, new Easing(x => Math.Sin(x * Math.PI / 2)), (v, c) => { }, () => false);
};
Content = new StackLayout
{
Children = { boxView, animateButton }
};
}
}
}
এখানে, Easing এর সাহায্যে একটি কাস্টম ফাংশন ব্যবহার করা হয়েছে যা Sine ফাংশনের উপর ভিত্তি করে অ্যানিমেশনটি নিয়ন্ত্রণ করে।
উপসংহার:
- Custom Animations তৈরি করা .NET MAUI-তে UI উপাদানগুলির জন্য একটি অত্যন্ত কার্যকরী পদ্ধতি, যা অ্যাপ্লিকেশনকে আরও আকর্ষণীয় এবং ইন্টারঅ্যাকটিভ করে তোলে।
- Animation ক্লাস ব্যবহার করে আপনি বিভিন্ন প্রপার্টি একত্রিত করে অ্যানিমেশন তৈরি করতে পারেন।
- Easing আপনার অ্যানিমেশনকে আরও স্মুথ এবং আকর্ষণীয় করতে সাহায্য করে।
- এই অ্যানিমেশনগুলি ব্যবহার করে আপনি অ্যাপ্লিকেশনটির অভিজ্ঞতাকে আরও রিচ এবং ইউজার-ফ্রেন্ডলি করতে পারেন।
Read more
